<template>
	<view class="content" >
		<form @submit="submit">
			<u-navbar :is-back="true" :border-bottom="false">
				<view style="height: 10px;"></view>
				<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
					<view class="slot-wrap-left"></view>
					<view class="slot-wrap-center mt20">发布商机</view>
					<view class="slot-wrap-right pr">
						<button form-type="submit" style="height: 70rpx;background: none;">
							<view style="position: relative;top:-20rpx;">
								<u-icon name="duihao" custom-prefix="qxl-icon" size="44"></u-icon>
							</view>
						</button>
					</view>
				</view>
			</u-navbar>

			<view v-if="show_main" class="main f32" >

				<view class="bgf disf p30">
					<view class="pt10" style="flex-shrink: 0;"><text style="color:red;">*</text>标题</view>
					<input type="text" :value="data.result.title" name="title" class="ml10 mt10" style="border: none;height: 40rpx;width: 90%;"
					placeholder-style="color:#999999;font-size:32rpx;"
					placeholder="请输入标题"/>
				</view>
				
				<view class="bgf disfr-lr p30 bto">
					<view class="pt10" style="flex-shrink: 0;">区域</view>
					<view  @click="goPage" data-uri="/pages/city-index/city-index">
						<text>{{data.result.area || ($vuex.state.globalData.businessCity.name ? $vuex.state.globalData.businessCity.name : '全国')}}</text>
					    <u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
					<input type="text" :value="data.result.area || ($vuex.state.globalData.businessCity.name ? $vuex.state.globalData.businessCity.name : '')" name="area" class="hide"/>
				</view>

				<view class="bgf p30 bto">
					<view v-for="(item,index) in data.classify" :key="item.id" :class="+(index > 0 ? 'mt20' : '')">
						<view style="flex-shrink: 0;">*{{item.name}}:</view>
						<view class="ml10 pr mt20" style="top:-3rpx;">
							<u-tag 
							v-for="(item2,index2) in item.child" 
							:key="index2" 
							:text="item2.name" 
							type="primary" 
							:mode="item2.activity ? 'dark' : 'light'" 
							@click="setTags(index,index2)"
							style="margin:0 15rpx 15rpx 0;"/>
						</view>
					</view>
				</view>
				
				<view class="bgf p30 bto">
					<view class="pt10" style="flex-shrink: 0;"><text style="color:red;">*</text>主要内容</view>
					<textarea style="height: 300rpx;margin-top: 20rpx;" name="content" maxlength="-1"
					placeholder-style="color:#999999;font-size:32rpx;" :value="data.result.content"
					placeholder="1.项目简介

2.项目优势

3.收益介绍"
					></textarea>
				</view>
				
				<view class="bgf p30 bto">
					<view class="pt10" style="flex-shrink: 0;">资源图片(4张)</view>
				    <view class="mt20">
						<view class="form-list">
						  <uploads-image :list="imageList" bg-color="#f4f5f7" :number="4" @confirm-event="uploadImage" @delete-event="deleteImage"/>
						  <input type="text" :value="imageString" name="images" maxlength="-1" class="hide"/>
						</view>
					</view>				
				</view>
				

				<view class="disf f32 mt20 mb20">
					<view class="mr50 pl30">联系方式</view>
				</view>
				<view class="bgf disf p30">
                    <view class="pt10" style="flex-shrink: 0;">手机号</view>
					<input type="text" :value="data.result.mobile || data.default_contact.mobile" 
					name="mobile" class="ml10 mt10" 
					style="border: none;height: 40rpx;width: 90%;"
					placeholder-style="color:#999999;font-size:32rpx;"
					placeholder="*请输入手机号"/>
				</view>
				<view class="bgf disf p30 bto">
				    <view class="pt10" style="flex-shrink: 0;">联系人</view>
					<input type="text" :value="data.result.contacts || data.default_contact.contacts"  
					name="contacts" class="ml10 mt10" 
					style="border: none;height: 40rpx;width: 90%;"
					placeholder-style="color:#999999;font-size:32rpx;"
					placeholder="*请输入联系人"/>
				</view>
				<view class="bgf disf p30 bto">
				    <view class="pt10" style="flex-shrink: 0;">公 司<text style="margin-right: 10rpx;"></text></view>
					<input type="text" :value="data.result.company || data.default_contact.company"  
					name="company" class="ml10 mt10" 
					style="border: none;height: 40rpx;width: 90%;"
					placeholder-style="color:#999999;font-size:32rpx;"
					placeholder="请输入公司名称"/>
				</view>
				<view class="bgf disf p30 bto">
				    <view class="pt10" style="flex-shrink: 0;"><text>微信号</text></view>
					<input type="text" :value="data.result.wechat || data.default_contact.wechat"   
					name="wechat" 
					class="ml10 mt10" 
					style="border: none;height: 40rpx;width: 90%;"
					placeholder-style="color:#999999;font-size:32rpx;"
					placeholder="*请输入微信号"/>
				</view>
				<view class="bgf disf p30 bto">
				    <view class="pt10" style="flex-shrink: 0;"><text>抖音号</text></view>
					<input type="text" :value="data.result.tiktok || data.default_contact.tiktok"  
					name="tiktok" class="ml10 mt10" 
					style="border: none;height: 40rpx;width: 90%;"
					placeholder-style="color:#999999;font-size:32rpx;"
					placeholder="请输入抖音号"/>
				</view>
				<view class="bgf disf p30 bto">
				    <view class="pt10" style="flex-shrink: 0;"><text>快手号</text></view>
					<input type="text" :value="data.result.kwai || data.default_contact.kwai" 
					name="kwai" class="ml10 mt10" 
					style="border: none;height: 40rpx;width: 90%;"
					placeholder-style="color:#999999;font-size:32rpx;"
					placeholder="请输入快手号"/>
				</view>
				<input  type="text" name="classify_id" :value="data.result.classify_id || classify_id" class="hide"/>
				<input  type="text" name="id" :value="data.result.id" class="hide"/>
			</view>
			<view style="height: 50rpx;"></view>
		</form>
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const data=ref({});
const classify_id=ref('');
const imageList=ref([]);
const imageString=ref('');
const center=ref(false);
//上传图片
const uploadImage=async(files)=>{
	not_load.value=false;
	for(let i=0;i< files.length;i++){
		let ret = await uni.$uploadFile('/appapi-upload-image',files[i],{});
		imageList.value.push(ret.data.url);
	}
	not_load.value=true;
	let imageStringTmp=imageList.value.join(',');
	imageString.value=imageStringTmp;
	//console.log(imageString);			 
};
// 删除图片
const deleteImage=(files)=>{		 
	imageList.value=files;
    let imageStringTmp=imageList.value.join(',');
    imageString.value=imageStringTmp;
};
//选择标签
const setTags=(index,index2)=>{
	let list=data.value.classify;
	for(let i in list){
		if(index == i){
			for(let j in list[i].child){
				if(j == index2){
					list[i].child[j].activity = list[i].child[j].activity  ? false : true;
					return;
				}
			}
			break;
		}
	}
	data.value.classify=list;
};
//页面加载时
onLoad(async (options)=>{
	classify_id.value=options.classify_id;
	center.value=options.center;
    loadPage(options,false);
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-opportunity-getform',options);
	if(ret.error_code != 0){
		not_load.value=false;
		uni.$utils.showToast(ret.info);
		return;
	}
	show_main.value=true;
	not_load.value=true;
	data.value=ret.data;
	imageList.value=data.value.result.images ? data.value.result.images : [];
	imageString.value=data.value.result.images_text;
	console.log(data.value);
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};

//提交表单
const submit=async(e)=>{
	if(!not_load.value) return;
	let form=e.detail.value;
	if(!form.classify_id){
		uni.$utils.showToast('请选择分类');
		return;
	}
	if(!form.title){
		uni.$utils.showToast('标题必填');
		return;
	}
	let tag_ids='';
	for(let i in data.value.classify){
		let isTrue=false;
		for(let j in data.value.classify[i].child){
			if(data.value.classify[i].child[j].activity){
				tag_ids+=data.value.classify[i].child[j].id+',';
				isTrue=true;
			}
		}
		if(!isTrue){
			uni.$utils.showToast(data.value.classify[i].name+'必选');
			return;
		}
	}
	if(!form.content){
		uni.$utils.showToast('主要内容必填');
		return;
	}
	form.tag_ids=tag_ids ? tag_ids.substring(0,tag_ids.length-1) : '';
	if(!form.mobile){
		uni.$utils.showToast('手机号必填');
		return;
	}
	if(!form.contacts){
		uni.$utils.showToast('联系人必填');
		return;
	}
	if(!form.wechat){
		uni.$utils.showToast('微信号必填');
		return;
	}
	//console.log(form);return;
	not_load.value=false;
	let ret=await uni.$post('/appapi-opportunity-getform',{},form);
	//console.log(ret);
	not_load.value=true;
	uni.$vuex.state.globalData.businessCity={};
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info || ret);
		return;
	}
	uni.$utils.showToast(ret.info,0,()=>{
		if(center.value){
			uni.navigateBack({data:1});
			return;
		}
		uni.$utils.goPage('/pages/user-business-list/user-business-list',1);
	});
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
</style>
